$(function () {
  // 用户头像裁切
  var $image = $('#image')
  // 初始化裁切图片的选区
  var options = {
    // 长度和宽度的比值
    aspectRatio: 1,
    // 预览区域
    preview: '.img-preview'
  }
  $image.cropper(options)

  // 上传按钮绑定点击事件
  $('#upload-btn').click(function () {
    // 用程序方式触发file标签的点击行为
    $('#myfile').trigger('click')
  })

  // 监听file标签的内容变化
  $('#myfile').change(function (e) {
    // 获取选中的一个文件
    var file = e.target.files[0]
    if (file) {
      // 选中了文件，替换默认的图片
      // URL.createObjectURL方法的作用：根据选中的文件对象生成一个预览URL地址
      var url = URL.createObjectURL(file)
      // 更新图片地址：需要先销毁之前的选区，然后更新图片的地址，最后重新生成选区
      // 原因：选区的大小是根据图片的大小动态计算的
      $image
        .cropper('destroy')
        .attr('src', url)
        .cropper(options)
    }
  })

  // 监听确定按钮的点击事件
  $('#confirm-btn').click(function () {
    // 获取选区并生成图片
    var img = $image.cropper('getCroppedCanvas', {
      width: 100,
      height: 100
    }).toDataURL('image/png')
    // 调用后端接口把图书上传到服务器中
    $.ajax({
      type: 'post',
      url: 'my/update/avatar',
      data: {
        avatar: img
      },
      success: function (res) {
        if (res.status === 0) {
          // 上传成功，更新头像
          // 需要在子窗口中调用父窗口中的全局函数
          parent.window.loadUserInfo()
          layer.msg(res.message)
        }
      }
    })
  })
})

